《疯狂HTML CSS3 JavaScript讲义》读书笔记第二章 HTML5的拖放API day04

2018-01-14

HTML5新增的拖放API

拖放API可以让HTML页面的任意元素都变成可拖动的，通过使用拖放机制可以开发出更友好的人机交互界面

拖放操作可以分成两个动作：在某个元素上按下鼠标并移动鼠标（没有松开鼠标），此时开始拖动；在拖动过程中，只要没有松开鼠标，将会不断产生拖动事件——这个过程被称为“拖”；把被拖动的元素拖到另外一个元素上并松开鼠标——这个动作被称为“放”。拖放操作由“拖”和“放”两个动作组成。

1. 启动拖动

在HTML5中，<img.../>元素默认就是可以拖动的；而<a.../>元素只要设置了href属性，它默认也是可拖动的

对于普通元素而言，如果希望把它变成可拖动的，只要把该元素的draggable属性设为true即可。此时因为设置了draggable=“true”，表示该元素可拖动，但拖动是并未携带数据，因此用户看不到拖动效果。

为了让拖动操作能携带数据，应该为被拖动元素的ondragstart事件指定监听器，在该监听器中让拖动操作可以携带数据。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>html5的拖放API</title>
  <style>
    #one {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="one" draggable="true">
    看世间，万物皆虚妄。
  </div>
  <script>
    const one = document.getElementById("one");
    one.ondragstart = function(evt){
      evt.dataTransfer.setData("text/plain" , "wenlai1010.github.io");  //让拖动操作携带数据
    }
  </script>
</body>
</html>

2.接受“放”

由上可以看到不管拖动到哪里，都显示一个禁止的标志，这是因为当被拖动元素“拖过”document对象时，document对象默认阻止了拖动事件，因此他们不能接受“放”。

为了让document可以接受“放”，应该为document的ondragover事件指定监视器，在监视器中取消document对拖动事件的默认行为。例如，在上面的JavaScript代码后面增加如下代码：

1
2
3

document.ondragover = function(evt){
  return false;
}

因为不同浏览器对于拖放操作的默认动作不相同，如果希望取消拖放操作的默认动作，则可以为document的ondrop事件绑定监听器。增加如下代码：

1
2
3

document.ondrop = function(evt){
  return false;
}

用户拖放HTML元素的过程中可能触发的事件如下：

事件	事件源	描述
ondragstart	被拖动的HTML元素	开始拖动时触发该事件
ondrag	被拖到的HTML元素	拖动过程中不断触发该事件
ondragend	被脱动的HTML元素	拖动结束时触发该事件
ondragenter	拖动时鼠标经过的元素	拖动的元素进入本元素的范围时触发该事件
ondragover	拖动时鼠标经过的元素	被拖动的元素进入本元素的范围内拖动时会不断地触动该事件
ondragleaver	拖动时鼠标进过的元素	被拖动的元素离开本元素时触发该事件
ondrop	拖动时鼠标经过的元素	其它元素被放到了本元素中时触发该事件

如果要实现一个可自由拖动的<div.../>如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>html5的拖放API</title>
  <style>
    #one {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="one" draggable="true">
    看世间，万物皆虚妄。
  </div>
  <script>
    var one = document.getElementById("one");
    one.ondragstart = function(evt){
      evt.dataTransfer.setData("text/plain" , "wenlai1010.github.io");
    };
    document.ondragover = function(evt){
      return false;
    };
    document.ondrop = function(evt){
      one.style.position = "absolute";
      one.style.left = evt.pageX + "px";
      one.style.top = evt.pageY +"px";
      return false;  //取消事件的默认行为
    }
  </script>
</body>
</html>

拖动时默认左上角为拖动点

HTML5新增的 拖放API

1. 启动拖动

2.接受“放”

HTML5新增的拖放API